<!--
~  Licensed to the Apache Software Foundation (ASF) under one or more
~  contributor license agreements.  See the NOTICE file distributed with
~  this work for additional information regarding copyright ownership.
~  The ASF licenses this file to You under the Apache License, Version 2.0
~  (the "License"); you may not use this file except in compliance with
~  the License.  You may obtain a copy of the License at
~
~     http://www.apache.org/licenses/LICENSE-2.0
~
~  Unless required by applicable law or agreed to in writing, software
~  distributed under the License is distributed on an "AS IS" BASIS,
~  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~  See the License for the specific language governing permissions and
~  limitations under the License.
-->

<div class="flex flex-col h-screen justify-between">
    <header class="mb-5 nifi-registry-header">
        <app-header></app-header>
    </header>
    <div class="pb-5 px-5 flex flex-col h-full">
        <div class="h-full flex flex-col">
            <h3 class="primary-color">Buckets</h3>
            <context-error-banner [context]="ErrorContextKey.GLOBAL"></context-error-banner>
            <div class="flex justify-between items-baseline">
                <bucket-table-filter
                    [filterTerm]="filterTerm"
                    [filterColumn]="filterColumn"
                    [filterableColumns]="filterableColumns"
                    [filteredCount]="dataSource.filteredData.length"
                    [totalCount]="dataSource.data.length"
                    (filterChanged)="applyFilter($event)"></bucket-table-filter>
                <div class="flex justify-end">
                    <button mat-icon-button class="primary-icon-button" (click)="openCreateBucketDialog()">
                        <i class="fa fa-plus"></i>
                    </button>
                </div>
            </div>
            @if (buckets$ | async; as buckets) {
                <bucket-table
                    [dataSource]="dataSource"
                    [selectedId]="selectedBucketId$ | async"
                    (selectBucket)="selectBucket($event)"
                    class="h-full flex"></bucket-table>
            }

            @if (bucketsState$ | async; as bucketsState) {
                <div class="flex justify-between mt-2">
                    <div class="text-sm flex items-center gap-x-2">
                        <button mat-icon-button class="primary-icon-button" (click)="refreshBucketsListing()">
                            <i class="fa fa-refresh" [class.fa-spin]="bucketsState.status === 'loading'"></i>
                        </button>
                    </div>
                </div>
            }
        </div>
    </div>
</div>
